<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
    <p v-if="error" class="error">{{ error }}</p>
  </form>
</template>

<script setup name="Login">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/auth'

const username = ref('')
const password = ref('')
const error = ref('')
const router = useRouter()

const handleSubmit = async () => {
  try {
    await login(username.value, password.value)
    router.push('/') // 登录成功后跳转到首页
  } catch (err) {
    error.value = '登录失败，请检查用户名和密码'
  }
}
</script>
